<%@ page language="java" contentType="text/html;" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<jsp:include page="../inc.jsp"></jsp:include>
<style type="text/css">
 .yellow_btn{
	border: none;
	border-radius: 5px;
	background-color: #FF6600;
	color: #FFFFFF;
	padding: 5px 20px;
	height: 25px;
	margin:3px 10px;
	font-weight: bold;
	text-decoration:none;
}	
.list_wrap{
    list-style: none;
    margin-top: 10px;
}
.list_wrap li{
    padding: 5px;
}
.table_b{
    border: 1px dotted #ddd;
    margin-bottom:5px;
    margin-top:-10px;
    margin-left:20px;
    border-left:1px dotted #95b8e7;
    border-top:1px dotted #95b8e7;
}
.table_b thead{
    color:#4474BB;
    font-weight: bold;
}
.table_b td{
	border:1px dotted #ddd;
	padding:5px;
	text-align: center;
}
.font_money {
	color:#FF6600;
	font-size: 20px;
}
</style>
<script type="text/javascript">
$(function(){
	progressLoad();
	$.ajax({
		type:'get',
		url:'${ctx}/order/orderDetail/${orderNumber}',
		dataType:'json',
		success:function(data){
			progressClose();
			if(data.success){
				//alert(data.obj.toStartAirport);
				initPage(data.obj);
			}
			else{
				layer.alert(data.msg);
			}
		},
		error:function(msg){
			progressClose();
			layer.alert("请检查您的网络连接，然后重试！");
		}
	}); 
	$("#popTable").datagrid({
		url:'${ctx}/order/queryPassenger/${orderNumber}?temp='+Math.random(),
			striped : true,
			fitColumns: false, 
			rownumbers : true,
			idField : 'id',
			 height:200 ,
			//sortName : 'id',
			//sortOrder : 'asc',
			method : 'get', 
			toolbar: '#toolbar',
			queryParams: {
			},
			columns : [ [ {
				width : '100',
				title : '票号',
				align : 'center',
				field : 'ticketNumber'
			}, {
				width : '100',
				title : '旅客姓名',
				field : 'id',
				align : 'center',
				formatter : function(value,row){
					var lastNameEn=row.lastName_en;
					var firstNameEn=row.firstName_en;
					return "<span>"+lastNameEn+"</span>"+"<span>"+firstNameEn+"</span>"
				}
			},
			{
				width : '100',
				title : '中文姓名',
				align : 'center',
				field : 'customerName',
				formatter : function(value,row){
					var lastNamecn=row.lastName_cn;
					var firstNamecn=row.firstName_cn;
					return "<span>"+lastNamecn+"</span>"+"<span>"+firstNamecn+"</span>"
				}
			},{
				width : '80',
				title : '性别',
				align : 'center',
				field : 'sex',
				formatter : function(value,row){
					if(row.sex ==2){
						return "女";
					}else if(row.sex==1){
						return "男";
					};
				}
				
			}, {
				width : '80',
				title : '旅客类型',
				align : 'center',
				field : 'passageType',
				formatter : function(value,row){
					if(row.passageType ==0){
						return "婴儿";
					}else if(row.passageType==1){
						return "成人";
					}else if(row.passageType == 2){
						return "儿童";
					};
				}
			}, {
				width : '80',
				title : '证件类别',
				align : 'center',
				field : 'docType',
				formatter : function(value,row){
					if(row.docType==1){
						return "身份证 ";
					}else if(row.docType == 2){
						return "护照";
					};
				}
			}, {
				width : '100',
				title : '证件号',
				align : 'center',
				field : 'docId'
			}, {
				width : '100',
				title : '证件有效期',
				align : 'center',
				field : 'docExpireDate'
			}, {
				width : '100',
				title : '出生日期',
				align : 'center',
				field : 'birthDate'
			}, {
				width : '100',
				title : '手机号',
				align : 'center',
				field : 'mobile'
			} , {
				field : 'action',
				title : '操作',
				align : 'center',
				width : 100,
				formatter : function(value, row, index) {
					var str = '';
					str += $.formatString('<a href="javascript:void(0)" class="mynewBtn" onclick="editFun(\'{0}\');" >修改</a>', row.id);
					str += '&nbsp;&nbsp;&nbsp;';
					str += $.formatString('<a href="javascript:void(0)" class="mynewBtn" onclick="delFun(\'{0}\');" >删除</a>', row.id);
					return str;
				}
			}] ]

	});
});
var purchQuantity = 0;
function initPage(b){
	$("#itineraryName").text(b.toStartAirport+"-"+b.toEndAirport);
	$("#periodDesc").text(b.travelDays);
	$("#payPrice").html(b.payPrice);
	$("#unitPrice").html(b.unitPrice);
	$("#purchQuantity").html(b.purchQuantity);
	$("#payEndTime").html(b.payEndTime);
	$("#ticketEndTime").html(b.ticketEndTime);
	purchQuantity = b.purchQuantity;
	
	for(var n in b.flights){
		var f = b.flights[n];
		var seatClass = CommonConverter.toFlightCabinTypeStr(f.cabin);
		var i = n-0+1;
		$("#tbl_flights").append("<tr class='table_body'>"
			+"<td>"+i+"</td>"
			+"<td>"+f.flightNumber+"</td>"
			+"<td>"+seatClass+"</td>"
			+"<td>"+f.departureCity+"("+f.departureCode+")"+f.departureTerminal+"-"+f.arrivalCity+"("+f.arrivalCode+")"+f.arrivalTerminal+"</td>"
			+"<td>"+f.departureDateStr+"</td>"
			+"<td>"+f.departureTime+"</td>"
			+"<td>"+f.arrivalTime + (f.intervalDay>0?("(+"+f.intervalDay+")"):"")+"</td>"
			+"</tr>");
	}
}
function addFun(){
	var rows = $("#popTable").datagrid("getRows"); //这段代码是获取当前页的所有行。
	if(rows.length>=purchQuantity){
		layer.alert("旅客数量超出订票数量");
		return false;
	}
	layer.open({
		type: 2,
		title: '',
		shadeClose: true,
		shade: 0.3,
		closeBtn: 0, //不显示关闭按钮
		yes: function(index, layero) {
			layer.close(index);
		},
		area: ['600px', '450px'],
		content: ['${ctx}/order/toPassengerAdd/${orderNumber}', 'no'], //iframe的url，no代表不显示滚动条
		end:function(){
			 $('#popTable').datagrid('load',{url:'${ctx}/order/queryPassenger/${orderNumber}?temp='+Math.random()});
		}
	});
}
function editFun(id){
	layer.open({
		type: 2,
		title: '',
		shadeClose: true,
		shade: 0.3,
		closeBtn: 0, //不显示关闭按钮
		yes: function(index, layero) {
			layer.close(index);
		},
		area: ['600px', '450px'],
		content: ['${ctx}/order/toPassengerEdit/'+id, 'no'], //iframe的url，no代表不显示滚动条
		end:function(){
			 $('#popTable').datagrid('load',{url:'${ctx}/order/queryPassenger/${orderNumber}?temp='+Math.random()});
		}
	});
}
function delFun(id){
	$.ajax({
		type:'get',
		url:'${ctx}/order/delPassenger/'+id,
		dataType:'json',
		success:function(data){
			if(data.success){
				 $('#popTable').datagrid('load',{url:'${ctx}/order/queryPassenger/${orderNumber}?temp='+Math.random()});
			}
			else{
				layer.alert(data.msg);
			}
		},
		error:function(msg){
			layer.alert("请检查您的网络连接，然后重试！");
		}
	}); 
}

	function isRepeat(arr) {
		var hash = {};
		for ( var i in arr) {
			if (hash[arr[i]])
				return true;
			hash[arr[i]] = true;
		}
		return false;
	}
	function submitTicket() {
		var rows = $("#popTable").datagrid("getRows"); //这段代码是获取当前页的所有行。
		if (rows.length == 0) {
			layer.alert("请先填写旅客信息");
			return false;
		}
		var orderNos = new Array();
		for (var i = 0; i < rows.length; i++) {
			var row = rows[i];
			var temp = row.docType + row.docId;
			orderNos.push(temp);
		}
		if(isRepeat(orderNos)){
			layer.alert("旅客信息中证件号有重复数据，请确认");
			return false;
		}
		if (rows.length > purchQuantity) {
			layer.alert("旅客数量超出订票数量");
			return false;
		}
		progressLoad();
		var obj = {
			"orderNumber" : "${orderNumber}"
		}
		$.ajax({
			type : 'post',
			url : '${ctx}/order/orderTicket',
			contentType : 'application/json;charset=utf-8',
			data : JSON.stringify(obj),
			success : function(data) {
				progressClose();
				if (data.success) {
					layer.alert('出票提交成功！', {
						skin : 'layui-layer-lan',
						title : [ '系统提示',
								'background-color:#00B2EE; color:#fff;' ],
						closeBtn : 0
					}, function(index) {
						closeWin();
						layer.close(index);
					});
				} else {
					layer.alert(data.msg);
				}
			},
			error : function(msg) {
				layer.alert("请检查您的网络连接，然后重试！");
			}
		});
	}
	var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
	function closeWin() {
		parent.layer.close(index);
	}
</script>
</head>
<body>
	<div class="easyui-layout" data-options="fit:true">
		<div data-options="region:'center'" >
			<div class="easyui-panel" title="产品信息" style="height: auto;">
				<ul class="list_wrap">
					<li>航线： <span id="itineraryName"></span>&nbsp;&nbsp;&nbsp;&nbsp;  往返间隔天数：<span id="periodDesc"></span></li>
					<li>航班信息：</li>
				</ul>
				<table cellpadding="0" cellspacing="0" width="95%" class="table_b" id="tbl_flights">
					<thead>
					<tr>
						<td width="5%">序号</td>
						<td width="10%">航班号</td>
						<td width="10%">舱位</td>
						<td width="45%">行程</td>
						<td width="10%">起飞日期</td>
						<td width="10%">出发时刻</td>
						<td>到达时刻</td>
					</tr>
					</thead>
				</table><br/>
			</div>
			<div class="easyui-panel" title="价格及支付" style="height: auto;">
				<br/><br/>
				<ul class="list_wrap">
					<li>票价：成人 <span id="unitPrice"></span>元/人 </li>
					<li>采购数量： <span id="purchQuantity"></span></li>
				</ul>
				<table cellpadding="0" width="90%" cellspacing="0" class="table_b">
					<thead>
					<tr>
						<td width="10%">支付金额</td>
						<td width="10%">支付截止时间</td>
						<td width="10%">类型</td>
						<td width="10%">状态</td>
					</tr>
					</thead>
					<tr class="table_body">
						<td><span id="payPrice"></span></td>
						<td><span id="payEndTime"></span></td>
						<td>票款</td>
						<td>已支付</td>
					</tr>
				</table><br/>
			</div>

			<div class="easyui-panel" title="出票信息" style="height: auto;" >
				<br/>&nbsp;&nbsp;&nbsp;&nbsp;最晚出票时间：<span id="ticketEndTime"></span>
				<br/>
				<br/>
			</div>
			<div class="easyui-panel" title="旅客信息" style="height: 250px;" >
						<table id="popTable" style="width:95%"></table>
				<div id="toolbar" style="display: none;">
						<a onclick="addFun();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon_add'">添加</a>
				</div>
			</div>
			<div style="height: 30px;text-align: center;" >
				<input type="button" value="提交出票" class="yellow_btn" onclick="submitTicket()">
				<input type="button" value="关闭" class="yellow_btn" onclick="closeWin()">
			</div>
 		</div>
 		
	</div>

 
</body>
</html>